<template>
  <div style="background-color: azure; height: 1000px;">
    <h2 style="background-color: beige;">客户服务信息表</h2>
    <table class="customer-service-table">
      <thead>
        <tr>
          <th>服务ID</th>
          <th>姓名</th>
          <th>联系电话</th>
          <th>评分</th>
          <th>薪资</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="service in customerServices" :key="service.customerServiceID">
          <td>{{ service.customerServiceID }}</td>
          <td>{{ service.name }}</td>
          <td>{{ service.contactNumber }}</td>
          <td>{{ service.rating }}</td>
          <td>{{ service.salary }}</td>
        </tr>
      </tbody>
    </table>
<p></p><p></p><p></p><p></p><p></p><p></p>
<h2 style="background-color: beige;">客户服务记录表</h2>
    <table class="customer-service-table">
      <thead>
        <tr>
          <th>服务记录ID</th>
          <th>服务内容</th>
          <th>服务起始时间</th>
          <th>评分</th>
          <th>服务号码</th>
          <th>客服ID</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="Record in customerServicesRecord" :key="Record.serviceRecordId">
          <td>{{ Record.serviceRecordId }}</td>
          <td>{{ Record.conversationContent }}</td>
          <td>{{ Record.conversationStartTime }}</td>
          <td>{{ Record.rating }}</td>
          <td>{{ Record.phoneNumber }}</td>
          <td>{{ Record.customerServiceId }}</td>
        </tr>
      </tbody>
    </table>
    <p></p><p></p><p></p><p></p><p></p><p></p>
    <h2 style="background-color: beige;">客户业务记录表</h2>
    <table class="customer-service-table">
      <thead>
        <tr>
          <th>服务记录ID</th>
          <th>服务内容</th>
          <th>服务起始时间</th>
          <th>评分</th>
          <th>服务号码</th>
          <th>客服ID</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="Record in customerWhoWork" :key="Record.serviceRecordId">
          <td>{{ Record.serviceRecordId }}</td>
          <td>{{ Record.conversationContent }}</td>
          <td>{{ Record.conversationStartTime }}</td>
          <td>{{ Record.rating }}</td>
          <td>{{ Record.phoneNumber }}</td>
          <td>{{ Record.customerServiceId }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  props: {
    customerWhoWork: Array // 声明 customerWhoWork 是一个数组
  },
  data() {
    return {
      // 假数据，实际应用中应从后端获取
      customerServices: [],

      customerServicesRecord:[],

    };
  },
  mounted(){
    this.ListServiceRecord()
    this.ListAllCS()
  },
  methods:{
    ListAllCS(){
      axios.get('http://localhost:8090/AdminCs/ListAllCS')
            .then(response => {
                this.customerServices = response.data; // 假设返回的数据是用户数组
            })
            .catch(error => {
                console.error('Error fetching users:', error);
            });
    },
    ListServiceRecord(){
      axios.get('http://localhost:8090/AdminCs/getCSRecord')
            .then(response => {
                this.customerServicesRecord = response.data; // 假设返回的数据是用户数组
            })
            .catch(error => {
                console.error('Error fetching users:', error);
            });
    }
  }
};
</script>
<style scoped>
.table-title {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.customer-service-table {
  width: 66%;
  margin: 0 auto; /* 水平居中 */
  border-collapse: collapse;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.customer-service-table th, .customer-service-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
}

.customer-service-table th {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

.customer-service-table .table-row:nth-child(even) {
  background-color: #f2f2f2;
}

.customer-service-table .table-row:hover {
  background-color: #e8e8e8;
}

.customer-service-table .table-row td {
  font-size: 14px;
}

.customer-service-table .table-row td:last-child {
  text-align: right;
}
</style>